<template>
    <div class="title-style-box">
        <ul class="outer-box">
            <li class="group-attribute-name"
                @click="titleGroupName=!titleGroupName">
                <i class="group-icon" :class="titleGroupName ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"/>
                <span>样式调整</span>
            </li>
            <li class="inner-box" :class="{'h0': !titleGroupName}">
                <TitlesStyle :base="appearance.base"/>
            </li>
            <li class="item-color-picker">
                <ColorPicker :options="appearance.base" :config="config"/>
            </li>
        </ul>
        <YXPadding style="margin-top: 20px;" :padding="appearance.padding"/>
    </div>
</template>

<script>
    import ColorPicker from '../common/contentstyle/ColorPicker.vue';
    import YXPadding from '../common/contentstyle/Padding.vue';
    import TitlesStyle from './TitlesStyle.vue';

    export default {
        name: 'TitleStyle',
        props: {
            appearance: {
                type: Object,
                default: _ => {
                    return {
                        base: {
                            titleType: '',
                            color: 'rgba(248,89,89,1)'
                        },
                        padding: {
                            top: 10,
                            right: 15,
                            bottom: 10,
                            left: 15
                        }
                    };
                }
            }
        },
        components: {
            YXPadding,
            ColorPicker,
            TitlesStyle
        },
        data() {
            return {
                titleGroupName: true,
                config: {
                    width: 71,
                    labelName: '装饰颜色'
                }
            };
        }
    }
</script>

<style scoped lang="scss">
    @import '../../../styles/init';

    .title-style-box {
        padding-top: 12px;
        border-top: 1px solid rgba(0, 0, 0, .15);

        .group-attribute-name {
            height: 20px;
            width: fit-content;
            user-select: none;
            color: #999;
            cursor: pointer;

            .group-icon {
                font-size: 18px;
            }
        }
        .outer-box {
            .h0 {
                height: 0 !important;
                overflow: hidden;
            }
            .inner-box {
                height: 200px;
                overflow: hidden;
                transition: height .2s;
            }
            .item-color-picker {
                margin-top: 10px;
            }
        }
    }
</style>
